<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<!--				<el-button type="primary" icon="el-icon-plus" @click="add" v-auth="'system:post:add'"></el-button>-->
				<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length == 0" @click="batch_del" v-auth="'system:post:remove'"></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<jdTable ref="table" :apiObj="apiObj" :params="search" row-key="id" @selection-change="selectionChange" stripe>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="流程名称" prop="taskName" width="200" fixed="left" show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="当前节点" prop="currentActivityName" width="300"></el-table-column>
				<el-table-column label="处理人" prop="assigneeName" width="100"></el-table-column>
				<el-table-column label="发起人" prop="launchUser" width="100"></el-table-column>
				<el-table-column label="状态" prop="taskStatus" width="150" align="center">
					<template #default="scope">
						<DictTag :options="statusType" :value="scope.row.taskStatus"></DictTag>
					</template>
				</el-table-column>
				<el-table-column label="耗时" prop="duration" width="200" align="center"></el-table-column>
				<el-table-column label="进度" prop="appName" width="200" align="center">
					<template #default="scope">
						<el-progress :percentage="scope.row.schedule" />
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="200">
					<template #default="scope">
						<el-button-group>
							<el-button text type="warning" @click="formModify(scope.row, scope.$index)" class="button">详情</el-button>
							<el-dropdown>
								<el-button text type="info" class="button">更多<el-icon style="font-size:16px;top:-4px; cursor: pointer;" class="app-icon">
									<component is="el-icon-arrow-down" /></el-icon></el-button>
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item>终止</el-dropdown-item>
												<el-dropdown-item divided>跳转</el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
								</el-button-group>
					</template>
				</el-table-column>
			</jdTable>
		</el-main>
	</el-container>
</template>

<script>

export default {
	name: "forms",
	components: {

	},
	data() {
		return {
			dialog: {
				save: false
			},
			apiObj: this.$API.monitor.workflow.list,
			selection: [],
			search: {
				keyword: null
			},
			form: {},
			permissionBtn: false,
			// 状态
			statusType:[]
		}
	},
	mounted() {
		this.getDict();
		// 自动展开菜单
		this.$store.commit('TOGGLE_IsCollapse', false);
	},
	methods: {
		//添加
		add() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open()
			})
		},
		//编辑
		formModify(row) {
			let routeData = this.$router.resolve({
				path: '/app/store/design/workflow',
				query: {
					appId: row.appId,
					modelId: row.id
				}
			})
			window.open(routeData.href, "_blank")
		},
		// 字典获取
		async getDict() {
			this.statusType = await this.Dict.get("sys_task_status");
		},
		// 挂起/激活流
		async processChange(row) {
			let res = await this.$API.app.flow.updateFlowStatus.put(row.id)
			if (res.code == 200){
				this.$refs.table.refresh()
				this.$message.success(res.msg)
			}
		},
		//批量删除
		async batch_del() {
			this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, "提示", {
				type: "warning"
			})
				.then(async () => {
					let ids = this.selection.map((item) => item.id)
					var res = await this.$API.app.flow.del.delete(ids)
					if (res.code == 200) {
						this.$refs.table.refresh()
						this.$message.success("操作成功")
					} else {
						this.$alert(res.msg, "提示", { type: "error" })
					}
					const loading = this.$loading()
					loading.close()
				})
				.catch(() => {})
		},
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection
		},
		//表格内开关
		async changeSwitch(val, row) {
			const oldStatus = row.formStatus
			row.formStatus = val
			row.$switch_status = true
			delete row.$switch_status
			this.form.id = row.id
			this.form.formStatus = val
			console.log(this.form)
			var res = await this.$API.app.form.changeStatus.put(this.form)
			if (res.code == 200) {
				this.$refs.table.refresh()
				this.$message.success("操作成功")
			} else {
				row.status = oldStatus
				this.$message.error(res.msg)
			}
		},
		//搜索
		formSearch() {

		},
		//本地更新数据
		handleSaveSuccess(data, mode) {
			if (mode == "add") {
				this.$refs.table.refresh()
			} else if (mode == "edit") {
				this.$refs.table.refresh()
			}
		}
	}
}
</script>

<style></style>
